// 导出自定义指令的配置对象
export default {
  // 指令所在元素插入到真实DOM时，触发一次
  // el到底是谁？
  // 1. 如果指令所在元素是原生DOM，el就是这个元素的DOM对象
  // 2.如果指令所在元素的自定义标签（组件），el就是组件的根元素DOM对象
  inserted (el) {
    focus(el)
  },
  update (el) {
    focus(el)
  }
}

function focus (el) {
  // el.tagName 或 el.nodeName 获取是原生DOM的标签名，
  // 都是大写字母的
  if (['INPUT', 'TEXTAREA'].includes(el.tagName)) {
    // 如果el本身就是 input 或 textarea，那么就直接聚焦
    el.focus()
    return
  }
  // 如果el不是 input 或 textarea，尝试去找子元素，
  // 看没有 input 或 textarea ，找到了，
  // 让子元素聚焦
  let node = el.querySelector('input')
  if (node) {
    node.focus()
    return
  }
  node = el.querySelector('textarea')
  if (node) {
    node.focus()
    return
  }
  // 抛出错误
  throw new Error('请把v-focus指令用在表单元素上')
}
